<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">-->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <script src="/js/jquery.min.js"></script>
</head>
<body>
<div id="container">
    <h1>日志管理</h1>
    <div>
        <button onclick="doGetLogs()" class="btn btn-primary">刷新</button>
        <button onclick="doDeleteLogs()" class="btn btn-danger">删除</button>
    </div>
    <div>
        <table class="table">
            <thead>
            <tr>
                <th><input type="checkbox" id="checkAll">全选</th>
                <th>操作人员</th>
                <th>操作名称</th>
                <th>请求方法</th>
                <th>IP地址</th>
                <th>操作状态</th>
                <th>操作时间</th>
            </tr>
            </thead>
            <tbody id="tbodyId">
            <tr>
                <td colspan="7">数据正在加载中......</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="pageId">
        <span class="total">总记录数(1)</span>
        <span class="pages">总页数(1)</span>
        <span class="pageNum">当前页(1)</span>
        <button class="first">首页</button>
        <button class="pre">上一页</button>
        <button class="next">下一页</button>
        <button class="last">尾页</button>
    </div>
</div>
<script>
    $(function () {
        //注册分页操作点击事件
        $("#pageId").on("click", ".first,.pre,.next,.last", doJumpToPage);
        //页面加载完成就去查询
        doGetLogs();
        //Thread中全选checkbox事件处理
        $("#checkAll").change(doChangeTBodyCheckBoxState);
        //tbody中checkbox对象事件注册
        $("#tbodyId").on("change", "input:checkbox", doChangeTheadCheckBoxState);
    });

    //基于tbody中checkbox状态修改thead中checkbox状态
    function doChangeTheadCheckBoxState() {
        //1.定义初始状态
        let flag = true;
        //2.获取tbody中所有checkbox对象状态逻辑与的结果
        $("#tbodyId input:checkbox").each(function () {
            //flag = flag && $(this).prop("checked");//与下面等效
            flag &&= $(this).prop("checked");
        });
        //3.修改thead中checkbox对象状态
        $("#checkAll").prop("checked", flag);
    }

    //修改tbody中checkbox状态
    function doChangeTBodyCheckBoxState() {
        //1.获取thead中checkbox的状态
        let flag = $(this).prop("checked");//任何一个类型为checkbox的input元素,都默认有一个checked属性
        //2.修改tbody中checkbox的状态
        $("#tbodyId input:checkbox").prop("checked", flag);
    }

    //执行客户端删除逻辑
    function doDeleteLogs() {
        //1.获取选中记录id
        //1.1定义一个数组,用于存储选中的记录id值
        let checkedIds = [];
        //1.2获取tbody中,元素名为input,类型为checkbox,并且是选中状态的input对象
        $("#tbodyId input:checkbox:checked").each(function () {
            //1.3迭代所有input对象,获取value属性值并存储到checkedIds数组
            checkedIds.push($(this).val());
        });
        //1.4判定是否有选中记录
        if (checkedIds.length == 0) {
            alert("请先选中");
            return;
        }
        //2.构建请求参数
        let ids = checkedIds.toString();
        console.log("ids", ids);
        //3.构建请求url
        let url = `http://localhost/log/${ids}`;
        debugger
        //4.发送ajax请求,执行删除逻辑
        $.ajax({
            method: "delete",
            url: url,
            success(result) {
                //处理删除响应结果
                doHandleDeleteResponseResult(result);
            }
        });
    }

    function doHandleDeleteResponseResult(result) {
        if (result.state == 1) {
            doHandleDeleteOk(result);
        } else {
            //doHandleDeleteError(result);
        }
    }

    //处理删除成功以后的操作
    function doHandleDeleteOk(result) {
        alert(result.message);
        //doGetLogs();//简单刷新
        let pageCurrent = window.pageCurrent;
        let pageCount = window.pageCount;
        let checkedAll = $("#checkAll").prop("checked");
        if (pageCurrent == pageCount && checkedAll && pageCurrent > 1) {
            window.pageCurrent--;
        }
        doGetLogs();
    }

    //分页查询日志信息
    function doGetLogs() {
        //1.请求的参数
        //let params = {pageCurrent: window.pageCurrent};
        let data = {pageCurrent: window.pageCurrent};
        //2.请求的url
        let url = "http://localhost/log/";
        //3.发送ajax请求
        $.ajax({
            /*url: url,
            data: params,*/
            url, data,
            success(result) {
                console.log(result);
                //$("#container").html(JSON.stringify(result));
                //处理服务端响应结果
                doHandleQueryResponseResult(result);
            }
        });
    }

    function doHandleQueryResponseResult(result) {
        console.log("result", result);
        if (result.state == 1) {
            doHandlerQueryOk(result);//处理正确的响应结果
        } else {
            //doHandlerQueryError(result.message);//处理错误的响应结果
        }
    }

    function doHandlerQueryOk(result) {
        //初始化日志列表信息
        doInitLogListInfo(result.data.list);
        //初始化日志分页信息
        doInitLogPageInfo(result.data);
    }

    //初始化日志列表
    function doInitLogListInfo(list) {
        //1.获取tbody对象,并清空原有内容
        let tBody = $("#tbodyId");
        tBody.empty();
        //2.迭代list集合追加新内容
        list.forEach(item => tBody.append(doCreateRow(item)));//item代表集合中的一个元素
        /*for (let i = 0; i < list.length; i++) {
            $("#tbodyId").append(
                "<tr>\n" +
                "            <td>" + list[i].id + "</td>\n" +
                "            <td>" + list[i].username + "</td>\n" +
                "            <td>" + list[i].method + "</td>\n" +
                "            <td>" + list[i].ip + "</td>\n" +
                "            <td>" + list[i].status + "</td>\n" +
                "            <td>" + list[i].createdTime + "</td>\n" +
                "</tr>");
        }*/
    }

    function doCreateRow(item) {
        return `<tr>
                    <td><input type="checkbox" value="${item.id}"></td>
                    <td>${item.username}</td>
                    <td>${item.operation}</td>
                    <td>${item.method}</td>
                    <td>${item.ip}</td>
                    <td align="center">${item.status ? "成功" : "失败"}</td>
                    <td>${item.createdTime}</td>
                </tr>`;
        /*2021-02-03T16:47:41.000+00:00
        <td>${new Date(item.createdTime).toLocaleString()}</td>//2021/2/4上午12:47:41
        <td>${new Date(item.createdTime).toDateString()}</td>//Thu Feb 04 2021
        <td>${new Date(item.createdTime).toLocaleDateString()}</td>//2021/2/4*/
    }

    //var pageCurrent;
    //var pageCount;
    //初始化分页信息
    function doInitLogPageInfo(data) {
        console.log("data", data);
        $(".total").html(`总记录数(${data.total})`);
        $(".pages").html(`总页数(${data.pages})`);
        $(".pageNum").html(`当前页(${data.pageNum})`);
        //存储当前页码值和总页数
        window.pageCurrent = data.pageNum;
        window.pageCount = data.pages;
    }

    //分页按钮事件处理函数
    function doJumpToPage() {
        //1.获取点击对象的class属性值(通过这个值判定这是哪个对象)
        let cls = $(this).prop("class");//$(this)表示被点击的对象
        //2.基于点击对象修改当前页码值
        //debugger;
        let pageCurrent = window.pageCurrent;//当前页码值
        let pageCount = window.pageCount;//总页数
        if (cls == "first") {
            pageCurrent = 1;
        } else if (cls == "pre" && pageCurrent > 1) {
            pageCurrent--;
        } else if (cls == "next" && pageCurrent < pageCount) {
            pageCurrent++;
        } else if (cls == "last") {
            pageCurrent = pageCount;
        } else {
            return;
        }
        //3.基于新的页码值重新执行分页查询
        console.log("pageCurrent", pageCurrent);
        //3.1存储新页码值
        window.pageCurrent = pageCurrent;
        //3.2重新查询
        doGetLogs();
    }
</script>
</body>
</html>